<!-- 财务概况 -->
<template>
    <div class="user" v-if="statisticsData != null">
        <div class="ls-card ls-card-top">
            <div class="journal-search m-t-16">
                <el-form ref="formRef" inline :model="summary" label-width="80px" size="small">
                    <el-form-item label="统计时间">
                        <el-date-picker
                            v-model="month"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-button size="small" type="primary" @click="getDataCenterStatistics">查询</el-button>
                    <el-button size="small" type="" @click="onReset">重置</el-button>
                </el-form>
            </div>
        </div>
        <div class="ls-card m-t-20">
            <div class="card-title">经营概况</div>
            <div class="card-content m-t-24" style="">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <div>
                            <div class="inline divIew ppol">
                                <div class="lighter m-b-8">当前订单总额（元）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_pay_price }}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">当前成交订单（个）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_sum }}</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="lighter">当前复购订单（个）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_repeat_sum }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">当前实际订单（个）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_reality_sum }}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-tooltip content="今日支付（元）" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">当前支付（元）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_pay_price }}</div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">余额支付（元）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_balance_pay_price }}</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="lighter">微信支付（元）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_wechat_pay_price }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">支付宝支付（元）</div>
                                <div class="font-size-24">{{ statisticsData.order.order_alipay_pay_price }}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16">
            <div class="card-title">用户概况</div>
            <div class="card-content m-t-24">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">总计累计用户</div>
                                <div class="font-size-24">{{ statisticsData.user.users_count }}</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="lighter">已激活</div>
                                <div class="font-size-24">{{ statisticsData.user.users_active_count }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">未激活</div>
                                <div class="font-size-24">{{ statisticsData.user.users_fail_count }}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">当前新增</div>
                                <div class="font-size-24">{{ statisticsData.user.user_count }}</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="lighter">已激活</div>
                                <div class="font-size-24">{{ statisticsData.user.user_active_count }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">未激活</div>
                                <div class="font-size-24">{{ statisticsData.user.user_fail_count }}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">当前用户总余额</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="font-size-24">{{ statisticsData.user.user_count_money }}</div>
                            </div>
                        </div>
                        <!-- <div>
                            <div class="inline divIew">
                                <div class="font-size-24">012</div>
                            </div>
                        </div> -->
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16">
            <div class="card-title">分销概况</div>
            <div class="card-content m-t-24">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">佣金累计</div>
                                <div class="font-size-24">{{ statisticsData.commission.commission_sum_price }}</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="lighter">已提现</div>
                                <div class="font-size-24">{{ statisticsData.commission.withdraw_sum_price }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">待审核提现</div>
                                <div class="font-size-24">{{ statisticsData.commission.withdraw_sum_fail_price }}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">当前佣金</div>
                                <div class="font-size-24">{{ statisticsData.commission.commission_current_price }}</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="lighter">已审核</div>
                                <div class="font-size-24">{{ statisticsData.commission.withdraw_current_price }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">待审核提现</div>
                                <div class="font-size-24">
                                    {{ statisticsData.commission.withdraw_current_fail_price }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="inline divIew">
                                <div class="lighter">昨日</div>
                            </div>
                        </div>
                        <div style="margin: 10px 0">
                            <div class="inline divIew">
                                <div class="font-size-24">789</div>
                            </div>
                        </div>
                        <div>
                            <div class="inline divIew">
                                <div class="font-size-24">890</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { GridComponent, LegendComponent, PolarComponent, TitleComponent } from 'echarts/components'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { Component, Vue } from 'vue-property-decorator'

import { apiStatistics, apiUserAnalysis } from '@/api/data/data'
import Template from '@/views/shop/pages/template.vue'

echarts.use([
    BarChart,
    GridComponent,
    CanvasRenderer,
    TitleComponent,
    LegendComponent,
    PolarComponent,
    LineChart,
    PieChart
])
@Component({
    components: { Template }
})
export default class User extends Vue {
    /** S Data **/
    statisticsData = null
    maker_members = 0
    maker_mentor = 0
    month = ''
    onReset() {
        this.month = ''
        this.getDataCenterStatistics()
    }

    // 获取数据
    getDataCenterStatistics() {
        apiStatistics({ date: this.month }).then(res => {
            this.statisticsData = res
        })
    }
    /** E Methods **/

    /** S Life Cycle **/
    created() {
        this.getDataCenterStatistics()
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.user {
    .ls-card {
        .card-title {
            font-size: 14px;
            font-weight: 500;
        }
    }

    .ls-card-top {
        padding-bottom: 0;
    }

    .ls-chart--turnover,
    .ls-chart--visitors {
        height: 460px;
        min-width: 500px;

        .chart {
            height: 400px;
        }
    }
}
.ppol {
    flex-flow: column;
}
.divIew {
    display: flex;
    align-items: center;
    :nth-child(1) {
        width: 150px;
        text-align: right;
        margin-right: 10px;
    }
}
.ls-card {
    .card-title {
        font-size: 14px;
        font-weight: 500;
    }
}
</style>
